$(function () {
    let $body = $("body");
    let $tree = $body.find("#tree");

    $body.on("click", "#addNav", function () {
        let tab = $tree.tree("getSelected");
        if (!tab) {
            $.messager.show({
                title: '错误信息',
                msg: "<span style='font-size: 16px'>未选择菜单，请选择！</span>"
            });
            return;
        }
        if ($(this).attr("data-type") === 'root') {
            vm.add('root');
        } else {
            $("#addNav-form").toggleClass('hide', '');
            $('#icon-list').addClass('hide');
            $(this).attr("data-type", "show-form");
            vm.getChildSort();
        }
    });

    $body.on("click", "input[name='selectIcon']", function () {
        let method = $(this).attr("data-type");
        let listMethod = $("#icon-list").attr("data-type");
        if (method === listMethod) {
            $("#icon-list").toggleClass('hide', '');
        } else {
            if ($("#icon-list").hasClass('hide')) {
                $("#icon-list").attr("data-type", method).removeClass('hide');
            } else {
                $("#icon-list").attr("data-type", method);
            }
        }
    });

    let vm = new Vue({
        el: "#item-edit",
        data: {
            pid: "",
            pname: "",
            cid: "",
            cname: "",
            url: "",
            sort: "",
            desc: "",
            iconCls: "",
            cSort: "",
            cname2: "",
            url2: "",
            icon2: "",
            sort2: "",
            desc2: ""
        },
        methods: {
            getRootSort: function () {
                $.ajax({
                    type: 'get',
                    url: 'pageSetting?method=findRootSort',
                    dataType: 'json',
                    success: function (data) {
                        vm.sort = data.sort;
                    }
                });
            },
            getChildSort: function () {
                $.ajax({
                    type: 'get',
                    url: 'pageSetting?method=findChildSort',
                    dataType: 'json',
                    success: function (data) {
                        vm.sort2 = data.sort;
                    }
                });
            },
            add: function (target) {
                let data = {};
                if (target === 'child') {
                    data = {
                        method: "save",
                        cname: vm.cname2,
                        url: vm.url2,
                        iconCls: vm.icon2,
                        sort: vm.sort2,
                        desc: vm.desc2,
                        pid: vm.pid,
                        roleId: role.checked.toString(),
                        target: target,
                        cid: vm.cid
                    };
                } else if (target === 'root') {
                    data = {
                        method: "save",
                        cname: vm.cname,
                        url: vm.url,
                        iconCls: vm.iconCls,
                        sort: vm.sort,
                        desc: vm.desc,
                        pid: vm.pid,
                        roleId: role.checked.toString(),
                        target: target,
                        cid: vm.cid
                    };
                } else {
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: 'pageSetting',
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status === 20000) {
                            layer.msg(data.msg, {icon: 1, time: 1500}, function () {
                                parent.leftMenu();

                                setTimeout(function () {
                                    level3($tree, vm, role);
                                }, 10);

                                $(':input', '#addNav-form')
                                    .not(':button,:submit,:reset,:hidden')
                                    .val('')
                                    .removeAttr('checked')
                                    .removeAttr('selected')
                            });
                        }
                    }
                });
            },
            update: function () {
                $.ajax({
                    type: 'post',
                    url: 'pageSetting',
                    data: {
                        method: "update",
                        cid: vm.cid,
                        cname: vm.cname,
                        iconCls: vm.iconCls,
                        url: vm.url,
                        desc: vm.desc,
                        sort: vm.sort,
                        roleId: role.checked.toString()
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.status === 20000) {
                            layer.msg(data.msg, {icon: 1, time: 1500}, function () {
                                parent.leftMenu();

                                setTimeout(function () {
                                    level3($tree, vm, role);
                                }, 100);
                            });
                        }
                    }
                });
            },
            del: function () {
                if (!$.trim(vm.cid)) {
                    layer.msg("请选择菜单再点击删除按钮", {icon: 2});
                    return;
                }
                let name = $.trim($("#cname").val());
                layer.confirm("确认删除菜单 <b style='color: red'>" + name + "</b> 吗？", {
                    title: "删除确认",
                    icon: 3
                }, function (index) {
                    $.get("pageSetting", {method: "delete", id: vm.cid}, function (result) {
                        if (result.status === 20000) {
                            layer.msg(result.msg, {icon: 1, time: 1500}, function () {
                                level3($tree, vm, role);
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2});
                        }
                    }, "json");
                    layer.close(index);
                });
            }
        },
    });

    let role = new Vue({
        el: "#role",
        data: {
            role: "",
            checked: [],
            icons: [],
            repeatClick: ""
        },
        created: function () {
            this.getRole();
            let that = this;
            setTimeout(function () {
                that.getIcon();
            }, 10);
        },
        methods: {
            getRole: function () {
                $.ajax({
                    type: 'get',
                    url: 'role?method=findAll',
                    dataType: 'json',
                    success: function (data) {
                        role.role = data.data;
                    }
                });
            },
            getIcon: function () {
                $.ajax({
                    type: "get",
                    url: "iconSetting?method=findAll",
                    dataType: "json",
                    success: function (data) {
                        role.icons = data.data;
                    }
                });
            }
        }
    });

    level3($tree, vm, role);

    $body.on("click", "#icon-list li", function () {
        let type = $(this).parents('#icon-list').attr("data-type");
        let iconCls = $(this).attr("data-name");
        if (type === 'update') {
            vm.iconCls = iconCls;
        } else if (type === 'add') {
            vm.icon2 = iconCls;
        }
    });
});

function level3($tree, vm, role) {
    $.get("../menu?method=levelThree", function (data) {
        $tree.tree({
            data: data,
            onClick: function (node) {
                if (role.repeatClick !== node.id) {
                    $("#icon-list").addClass('hide');
                    role.repeatClick = node.id;
                }
                let a = `<i class="fa fa-floppy-o"></i>&nbsp;添加同级节点`;
                let b = `<i class="fa fa-floppy-o"></i>&nbsp;添加子级节点`;
                let $parent = $tree.tree("getParent", node.target);
                if (node.parentId === '0' || node.id === '0') {
                    $("#addNav").html(b);
                } else {
                    $("#addNav").html(a);
                }
                if (node.id === '0') {
                    $("#addNav").attr("data-type", "root");
                    vm.pid = node.parentId;
                    vm.pname = node.text;
                    vm.cid = "无需填写";
                    vm.cname = "";
                    vm.url = "";
                    vm.sort = "";
                    vm.desc = "";
                    vm.iconCls = "";
                    $("#cname").focus();
                    vm.getRootSort();
                    $("#addNav-form").addClass("hide");
                } else {
                    $("#addNav").attr("data-type", '');
                    vm.pid = node.parentId;
                    vm.pname = $parent.text;
                    vm.cid = node.id;
                    vm.cname = node.text;
                    vm.url = node.url;
                    vm.sort = node.sort;
                    vm.desc = node.desc;
                    vm.iconCls = node.iconCls;
                    //查询拥有该节点权限的角色组
                    $.ajax({
                        type: "post",
                        url: "role",
                        data: {
                            method: "findByNavId",
                            navId: node.id
                        },
                        dataType: "json",
                        success: function (data) {
                            role.checked = data.roleId;
                            if (data.count === data.total) {
                                $("#checked-all").attr("checked", true);
                            }
                        }
                    });
                }
            }
        });
    }, 'json');
}
